import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import ListItem from "../../components/listitem";
import { ListRow } from "../../types";

const Classify=()=>{

    const [list,setList]=useState<ListRow[]>([])

    const ClassList=async()=>{
        const resp=await axios.get('/api/list')
        setList(resp.data.data)
        console.log(resp)
    }
    const navigate=useNavigate()

    useEffect(()=>{
        ClassList()
    },[])

    return (
        <div className="tab-right">
            {
                list.map((v,i)=>{
                    return(
                    <ListItem v={v} key={v.id} onClick={()=>navigate(`/detail/${v.id}`,{state:v})}></ListItem>
                    )
                })
            }
        </div>
    )
}

export default Classify